<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="wrapper"> 
 
    <h2>基于css的表单模板</h2> 
 
    <div class="form-container"> 
    
    <div class="errors"> 
        <p><em>错误提示信息:</em></p> 
        <ul> 
            <li>用户名不能为空！</li> 
            <li>国家不能为空！</li> 
        </ul> 
        <p>表单 <strong>没有</strong> 保存成功.</p> 
    </div> 
 
    <form action="#" method="post"> 
    
    <p class="legend"><strong>注意:</strong>带*号的为必填字段.(<em>*</em>)</p> 
    
    <fieldset> 
        <legend>用户基本信息</legend> 
            <div><label for="uname" class="error">用户名 <em>*</em></label> <input id="uname" type="text" name="uname" value="" class="error" />
             <strong class="note">我们不会将你的邮箱告诉任何人. </strong> </div> 
            <div><label for="email">邮箱地址</label> <input id="email" type="text" name="email" value="" /> 
                <p class="note">我们不会将你的邮箱告诉任何人. </p> 
            </div> 
    
            <div><label for="fname">称呼 <em>*</em></label> <input id="fname" type="text" name="fname" value="" size="50" /></div> 
    </fieldset> 
    
    <fieldset> 
        <legend>联系信息</legend> 
            <div><label for="address1">地址 1 <em>*</em></label> <input id="address1" type="text" size="50" /></div> 
            <div><label for="address2">地址 2</label> <input id="address2" type="text" size="50" /></div> 
            <div><label for="country" class="error">国家 <em>*</em></label> <input id="country" type="text" name="country" value="" class="error" size="12" /> 
                <p class="note">请选择正确的国家信息.</p> 
            </div> 
            <div><label for="telephone">电话</label> <input id="telephone" type="text" size="3" /> - <input type="text" size="3" /> - <input type="text" size="4" /> 
                <p class="note">(###) - ### - ####</p> 
            </div> 
    </fieldset> 

    <fieldset> 
        <legend>属性</legend> 
            <div> 
                <label for="type">类型 <em>*</em></label> 
                <select id="type"> 
                    <optgroup label="Type of Whatever"> 
                        <option>Corporate</option> 
                        <option>Individual</option> 
                    </optgroup> 
                </select> 
            </div> 
            <div class="controlset"> 
                <span class="label">状态 <em>*</em></span> 
                <input name="approved" id="approved" value="1" type="checkbox" /> <label for="approved">Approved</label> 
                <input name="pending" id="pending" value="1" type="checkbox" /> <label for="pending">Pending Applications</label> 
                <input name="actives" id="actives" value="1" type="checkbox" /> <label for="actives">Active Service</label> 
            </div>            
 
            <div class="controlset"> 
                <span class="label">本地设置</span> 
                <input name="radio1" id="radio1" value="1" type="radio" /> <label for="radio1">Option 1</label> 
                <input name="radio1" id="radio2" value="1" type="radio" /> <label for="radio2">Option 2</label> 
                <input name="radio1" id="radio3" value="1" type="radio" /> <label for="radio3">Option 3</label> 
            </div>            
 
            <div class="controlset"> 
                <span class="label">其它 <em>*</em></span> 
                <div> 
                    <input name="approved" id="check1" value="1" type="checkbox" /> <label for="check1">Some Option 1</label> <br /> 
                    <input name="pending" id="check2" value="1" type="checkbox" /> <label for="check2">Some Option 2</label> <br /> 
                    <input name="actives" id="check3" value="1" type="checkbox" /> <label for="check3">Some Option 3</label> <br /> 
                </div> 
            </div>            
    </fieldset> 
    
    <fieldset> 
        <legend>首选项</legend> 
            <div> 
                <label for="desc">描述 <em>*</em></label> 
                <textarea id="desc" name="desc" cols="30" rows="4"></textarea> 
            </div> 
            <div> 
                <label for="info">地址信息</label> 
                <textarea id="info" name="info" cols="40" rows="5"></textarea> 
            </div> 
    </fieldset> 
    
    <div class="buttonrow"> 
        <input type="submit" value="提交" class="button" /> 
    </div> 
 
    </form> 
    
    </div><!-- /form-container --> 
    
    <p id="copyright">

    这是一个基本的表单模板，更多请看：<a href="http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/" title="Nidahas: Forms markup and CSS - Revisited">this blog article</a>.</p> 
    <br/>
    

</div><!-- /wrapper --> 
</body>
</html>